<template>
  <div class="app-container">
    <div>
      <div class="top">
        <span>反馈详情</span>
        <div />
      </div>
      <el-row :span="24" justify="start" type="flex">
        <el-col :span="10">
          <div class="title">
              <span class="font" style="margin-right:.9375rem">提交用户:</span>
              <span class="font">{{ form.memberName }}</span>
          </div>
          <div class="title">
              <span class="font" style="margin-right:.9375rem">联系方式:</span>
              <span class="font">{{ form.phone }}</span>
          </div>
          <div class="title">
              <span class="font" style="margin-right:.9375rem">工作单位:</span>
              <span class="font">{{ form.workUnit }}</span>
          </div>
          <div class="title">
              <span class="font" style="margin-right:.9375rem">提交内容:</span>
              <span class="font">{{ form.opinionContent }}</span>
          </div>
          <div class="title">
              <span class="font" style="margin-right:.9375rem">提交时间:</span>
              <span class="font">{{ form.createTime }}</span>
          </div>
          <div class="title">
              <span class="font" style="margin-right:.9375rem">反馈类型:</span>
              <el-tag v-if="form.opinionType == '组织建设'">组织建设</el-tag>
              <el-tag type="success" v-if="form.opinionType == '优化建议'">优化建议</el-tag>
              <el-tag type="warning" v-if="form.opinionType == '活动问题'">活动问题</el-tag>
              <el-tag type="info" v-if="form.opinionType == '其他意见'">其他意见</el-tag>
          </div>
        </el-col>
      </el-row>
      <div class="button">
        <el-button type="primary" size="medium" @click="submit" v-if="form.status == 0"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { checkOpinion,readOpinion } from "@/api/society";
export default {
  data() {
    return {
      // 表单参数
      form: {
        createTime:'',
        memberName:'',
        opinionContent:'',
        opinionType:'',
      },
    };
  },
  created(){
    this.getMessage()
  },
  methods: {
    getMessage(){
      let params = this.$route.query.key
      checkOpinion(params).then(res=>{
        if(res.code == 200){
          this.form=res.data
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        createTime:'',
        memberName:'',
        opinionContent:'',
        opinionType:'',
      }
    },
    submit(){
      const params = this.form.oid
      readOpinion(params).then(res=>{
        if(res.code == 200){
          this.$message({
          message: '已确认',
          type: 'success'
        });
        this.$router.push({
          path: "/society/advice",
        });
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 30%;
  height: .0625rem;
}
.app-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #f5f5f5;
}
.app-container > div {
  background-color: white;
  padding: 1.5rem;
  height: 50rem;
}
.top {
  display: flex;
  margin: 2.5rem 0rem 2.5rem 3.5rem;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 1rem;
  color: #000000;
  margin-left: .5rem;
  width: 5.625rem;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: .9375rem;
  color: #4F5570;
}
.top > div {
  border-bottom: .0625rem solid #e5e5e5;
  height: .9375rem;
  width: 100%;
  padding-bottom: -1.25rem;
  margin-left: .9375rem;
}
.top::before {
  content: "";
  width: .1875rem;
  background: #2854b7;
  height: 1.25rem;
  border-radius: .125rem;
}
.title,
.image,
.label,
.button {
  margin-left: 4.375rem;
  margin-bottom: 1.875rem;
}
.constitution {
  margin-left: 4.375rem;
}
.button el-button:first-child(){
  width:5rem;
  line-height: 1.25rem;
  height: 2.5rem;
}
</style>
